iT邦幫忙

6

javascript的範例學習:以jQuery為例(十),plugin

  • 分享至 

  • xImage
  •  

邦友wordsmith在http://ithelp.ithome.com.tw/question/10001977推了jaceju大大「自製 jQuery Plugin - Part 1」,連到樂多的貼文,已經失聯了,
是2008~2009年的事,看起來把文章放在IT邦比較安全。GOOGLE一下,在http://www.jaceju.net/blog/archives/336/還是找得到。
Part2在http://www.jaceju.net/blog/archives/337/
另外fillano大牛也寫了Javascript面面觀:網頁篇《jQuery inside - plugin》在http://ithelp.ithome.com.tw/question/10032753另一篇Javascript面面觀:網頁篇《jQuery inside - 核心架構》也可以合併來看,
特別是他寫道

大體來說,jQuery其實是一個大facade,透過他的定義好的操作方法,就可以簡單地操作DOM,並且可以透過一些方式延伸及擴充功能。(但不是繼承,你要嘛就是用他的功能,要嘛就是擴充他,不過很難繼承)

,於筆者心有戚戚。

2009年的jQuery才4千多行,一路走來,還是維持著微核心。
現在2012年,筆者踩在前人走過的路上。別有一番滋味。jQuery仍然成長枝繁葉茂,分出一些新專案,生生不息。
這裏簡單翻譯一下DIY plugin的過程。
摘錄自http://docs.jquery.com/Plugins/Authoring
起步:
框架,形。

jQuery.fn.myPlugin = function() {

  // Do your awesome plugin stuff here

};

但是一般人不這樣寫,引用多個類別庫,會有變數覆蓋的問題,
所以打包一下。
變成

(function( $ ) {
  $.fn.myPlugin = function() {
  
    // Do your awesome plugin stuff here

  };
})( jQuery );

所以plugin框架是長成這個樣子。
文中提到,IIFE (Immediately Invoked Function Expression) ,筆者還是第一次看到。
這樣寫,才可以安心的用**$**.

再來是Context(內文),讓plugin實際做一點事。

(function( $ ){

  $.fn.myPlugin = function() {
  
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));
        
    this.fadeIn('normal', function(){

      // the this keyword is a DOM element

    });

  };
})( jQuery );

使用方法:

$('#element').myPlugin();

筆者覺得如果要快速入門的話,以官方手冊的這個例子為佳,一開始不宜講太多,會讓筆者心生恐懼。

或是下一個例子,

(function( $ ){

  $.fn.maxHeight = function() {
  
    var max = 0;

    this.each(function() {
      max = Math.max( max, $(this).height() );
    });

    return max;
  };
})( jQuery );

使用方法:

var tallest = $('div').maxHeight(); // Returns the height of the tallest div

然後,分開幾天,
練習其他的主題,
手冊裏其餘的部分,
如Maintaining Chainability(讓你的plugin有chain 的能力)
,Defaults and Options(讓你的plugin有預設值和選項)
,Namespacing(命名空間)
,Plugin Methods(多個方法可用)
,Events(事件)
,Data(維護state)
最後還有最佳體驗(Summary and Best Practices)

小結:冒然的想去追蹤jQuery源碼,基本上是很容易失焦且困難重重的路,
會用了,且會寫Plugin, 再回頭看jQuery源碼,也許阻力會小些。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-08-08 13:23:32

timloo提到:
小結:冒然的想去追蹤jQuery源碼,基本上是很容易失焦且困難重重的路,
會用了,且會寫Plugin, 再回頭看jQuery源碼,也許阻力會小些。

畫龍點睛!嚴重力推!

我要留言

立即登入留言